<template>
  <!-- 注册量走势 折线图 -->
    <div id="chartsline1"></div>
</template>

<script>
import * as echarts from "echarts";

import {registerlast7Days} from "@/api/tenantApis/indexStatistics.js"
export default {
  name: "",
  data() {
    return {
      myChart1: null,
      xData: ['2024-06-01','2024-06-02','2024-06-03','2024-06-04','2024-06-04','2024-06-04','2024-06-04','2024-06-04','2024-06-04',],
      nums:[142,265,186,654,422,896,268,324,183],
      total:0
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      var chartDom = document.getElementById("chartsline1");
      this.myChart1 = echarts.init(chartDom);
      this.getData();
    });
  },
  methods: {
    getData(){
      registerlast7Days().then(res=>{
        this.xData = []
        this.nums = []
        this.total = res.data.count
        if(res.data.dayList&&res.data.dayList.length){
          res.data.dayList.forEach(r=>{
            this.xData.push(r.click_date)
            this.nums.push(r.count)
          })
        }
        this.initCharts1()
      })
    },
    initCharts1() {
      const colors=['#6C5DD3','#A0D7E7']

      let option = {
        title: {
          show: true,
          text: `总注册量:{a|${this.total}}人`,
          top:20,
          // left:'center',
          right:'center',
          textAlign:'center',
          textStyle:{
            fontSize:16,
            fontWeight:'normal',
            rich: {
                  a: {
                      color: '#6C5DD3',
                      fontSize: 24
                  }
              }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        color: colors,
        legend: {
          show: false,
          data: [{
              name:'人数',
              textStyle:{
                color:colors[0]
              }
            }
          ],
        },
        grid: {
          left: "80",
          right: "30",
          top: "100",
          bottom: "20",
        },

        xAxis: [
        {
            name: '',
            type: 'category',
            axisTick: { show: false },
            boundaryGap:false,
            axisLine:{
              lineStyle:{
                color: '#EAEBF0'
              }
            },
            nameTextStyle:{
              color: '#333'
            },
            axisLabel:{
              color: '#333',
              align:'center',
              showMaxLabel:false
            },
            
            data: this.xData
          }
        ],
        yAxis: [
          {
              name: '数量',
              type: 'value',
              position:'left',
              axisLine:{
                show: true,
                lineStyle: {
                  color: '#D2D2D2'
                }
              },
              axisLabel:{
                color: '#333',
                // formatter: '{value} 单'
              },
              splitLine:{
                lineStyle:{
                  color:'#EAEBF0',
                  type:'dotted'
                }
              },
              axisTick:{
                show:false
              }
            }
        ],
        series: [
          {
            name: '人数',
            type: 'line',
            smooth:true,
            emphasis: {
              focus: 'series'
            },
            barMaxWidth:'30',
            data: this.nums,
            areaStyle: {
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: 'rgba(90,45,255,0.5)' },
                      { offset: 1, color: 'rgba(45,96,255,0)' }
                    ])
            }
          }
        ],
      };
      this.myChart1&&option && this.myChart1.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
#chartsline1 {
  width: 100%;
  height: 350px;
}
</style>
